<template>
  <div>
    <slot v-if="!hasError"></slot>

    <template v-else>
        
      <slot name="fallback" :error="error" :info="info">
        <h1>Error Captured!</h1>
        <p>error {{ error }}</p>
        <p>info {{ info }}</p>
      </slot>

    </template>
  </div>
</template>

<script>
export default {
  emits: ["error"],

  props: {
    emitError: {
      type: Boolean,
      default: false,
    },
  },

  data() {
    return {
      hasError: false,
      error: null,
      info: null,
    };
  },

  /* 捕获子组件错误 */
  errorCaptured(err, vm, info) {
    console.log("ErrorBoundary 捕获到错误！");

    // 标记发生错误
    this.hasError = true;
    this.error = err;
    this.info = info;

    this.emitError && this.$emit("error", err, info);

    // 返回 `false` 停止错误继续传播
    return false;
  },
};
</script>
